<%--
  Created by IntelliJ IDEA.
  User: hdwx
  Date: 2016/12/23
  Time: 10:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background-color: #f8f8f8;
        }

        #top img{
            position: absolute;
            top: 30px;
            left: 90px;
        }
        #top_right{
            position: absolute;
            top: 60px;
            left:1155px;
        }
        #top_right a{
            padding:10px;
            font-size: 14px;
            text-decoration: none;
            color: #333;
        }
        #top_right a:hover{
            color: #40a9ff;
        }
        #content{
            background-color: #ffffff;
            width: 1200px;
            height:750px;
            position: relative;
            top:140px;
            left:80px;
        }
        #img_content_top{
            position: absolute;
            top:20px;
            left:50px;

        }
        #img_content_right{
            position: absolute;
            top:100px;
            right:70px;
        }
        #table_register{
            position: absolute;
            top:100px;
            left:80px;
            color: #666666;;
            font-size: 14px;

        }
        .tr{
            padding:10px;
        }
        .tr input[type="radio"]{
            vertical-align:middle;
        }
        .note {
            cursor:text;
            padding:7px;
            background-color: #f8f8f8;
            border:1px solid #cccccc;
        }
        #note_col_width{
            width: 250px;
        }
        #content input{
            height: 30px;
        }
        #content input[type="text"],input[type="password"],input[type="tel"],input[type="email"]{
            width: 200px;
        }
        #content .option{
            height:30px;
            width:120px;
        }
        #button_school_choose{
            padding:5px;
            border: 0;
            color: white;
            background-color: #8ec2f4;
        }
        #registration_agreement{
            height:0px;
            position: relative;
            top:-23px;
            left: 15px;
            font-size: 14px;
            padding-right: 0px;
            color: black;
        }
        #registration_agreement a:hover{
            cursor: pointer;
            color: #40a9ff;
        }
        #button_register{
            font-size: 16px;
            font-weight: 700;
            padding: 10px 25px;
            border:0;
            background-color: #40a8ff;
            color: white;
        }
        #button_register:hover,
        #button_school_choose:hover{
            cursor: pointer;
        }
        #footer{
            position: relative;
            height:50px;
            top:150px;
            text-align: center;
            line-height:50px;
            font-size: 14px;
            font-weight:600;
            color: #666666;
        }
        .error{
            border-color:red ;
            color: red;
        }
        .correct{
            border-color: limegreen;
            color: limegreen;

        }
        .hidden{
            display: none;
            visibility: hidden;
        }
    </style>
    <script src="jQuery/jquery-1.11.3.js"></script>
    <script src="js/register.js"></script>
    <script type="text/javascript">
        $(function () {
            var judgeAccount=false;
            $("#account").blur(function () {
                var account=$(this).val();
                var reg=/^[a-zA-Z0-9-_]{6,20}$/
                var note=$(".note:eq(1)");
                if(reg.test(account)){
                    $.post("accountCheck.do",{account:account},function (data) {
                        if(data=="1"){
                            note.removeClass();
                            note.addClass("note correct");
                            note.html("当前用户名可用！")
                            judgeAccount=true;
                        }else if(data=="0"){
                            note.removeClass();
                            note.addClass("note error");
                            note.html("当前用户名已被注册，请重试!");
                            judgeAccount=false;
                        }else{
                            note.removeClass();
                            note.addClass("note error");
                            note.html("错误，请重新输入！");
                            judgeAccount=false;
                        }
                    })
                }else{
                    note.removeClass();
                    note.addClass("note error");
                    note.html("格式错误，6-20位字符，数字、字母、-、下划线(_)组成");
                    judgeAccount=false;
                }



            })
            $("form").submit(function () {
                return judgeName()&&judgeAccount&&judgePassword1()&&judgePassword2()&&judeTel()&&judgeEmail()&&judgeWork()&&judgeSchool()&&judgeAgreement();
            })

        });
    </script>
</head>

<body>
<div>
<!--顶部，logo+右上角-->
<div id="top">
    <img src="static/img/logo.png" alt="图片无法加载">
    <div id="top_right">
        <a href="home.jsp">首页</a>|<a href="feedback.jsp">意见反馈</a>
    </div>
</div>
<!--用户信息表单-->
<div id="content">
    <img src="static/img/register.jpg" id="img_content_top">
    <!--注册表单-->
    <div id="form">
        <form action="register.do" method="post">
            <table id="table_register"  >
                <tr >
                <td >*</td>
                <td>真实姓名</td>
                <td class="tr"><input id="name" name="name" type="text" onblur="judgeName()"></td>
                <td id="note_col_width"><span class="note" >
                        <span id="name_correct" class="hidden">真实姓名可用！</span>
                        <span id="name_tip">请填写您的真实姓名</span>
                </span></td>
                </tr>
                <tr>
                    <td >*</td>
                    <td>用户名</td>
                    <td class="tr"><input id="account"  name="account" type="text"></td>
                    <td><span class="note" >
                        6-20位字符，数字、字母、-、下划线(_)组成
                    </span></td>
                </tr>
                <tr>
                    <td >*</td>
                    <td>用户密码</td>
                    <td class="tr"><input id="password1" name="password1" type="password" onblur="judgePassword1()"></td>
                    <td><span class="note" >
                        <span id="password1_correct" class="hidden">密码可用！</span>
                        <span id="password1_error" class="hidden">错误 ，</span>
                        <span id="password1_tip">6-25位字符,建议由字母/数字/符号两种以上组合</span>
                    </span></td>
                </tr>
                <tr>
                    <td >*</td>
                    <td>确认密码</td>
                    <td class="tr"><input id="password2" name="password2" type="password" onblur="judgePassword2()"></td>
                    <td><span class="note" >
                        <span id="password2_correct" class="hidden">密码一致可用！</span>
                        <span id="password2_error" class="hidden">两次密码输入不一致！</span>
                        <span id="password2_tip">请再次输入密码</span>
                    </span></td>
                </tr>
                <tr>
                    <td >*</td>
                    <td>用户性别</td>
                    <td class="tr"><input name="sex" type="radio" value="男" checked>男
                        <input name="sex" type="radio" value="女">女
                    </td>
                    <td>  </td>
                </tr>
                <tr>
                    <td >*</td>
                    <td>手机号码</td>
                    <td class="tr"><input id="tel" name="tel" type="tel" maxlength="11" onblur="judeTel()"></td>
                    <td><span class="note" >
                        <span id="tel_error" class="hidden">手机号格式不对</span>
                        <span id="tel_correct" class="hidden">手机号码可用！</span>
                        <span id="tel_tip">请填写真实手机号码</span>
                    </span></td>
                </tr>
                <tr>
                    <td >*</td>
                    <td>电子邮箱</td>
                    <td class="tr"><input  id="email" name="email" type="email" onblur="judgeEmail()"></td>
                    <td><span class="note" >
                        <span id="email_correct" class="hidden">电子邮件可用！</span>
                        <span id="email_error" class="hidden">电子邮件格式不对</span>
                        <span id="email_tip">请填写真实邮箱号码，找回密码时需要</span>
                    </span></td>
                </tr>
                <tr>
                    <td >*</td>
                    <td>职务</td>
                    <td class="tr"><input id="work" name="work" type="text" onblur="judgeWork()" </td>
                    <td><span class="note" >
                        <span id="work_correct" class="hidden">格式正确！</span>
                        <span id="work_error" class="hidden">不能为空！</span>
                        <span id="work_tip">请填写您现任职务</span>
                    </span></td>
                </tr>
                <tr>
                    <td >*</td>
                    <td>籍贯</td>
                    <td class="tr" colspan="2">
                        <select id="city" name="city" class="option">
                            <%--<option value="BeiJing">北京市</option>--%>
                            <%--<option value="TianJing">天津市</option>--%>
                            <%--<option value="SiChuan">四川省</option>--%>
                            <%--<option value="ShangHai">上海市</option>--%>
                        </select>
                        <select id="area" name="area" class="option">
                            <%--<option value="DongCheng">东城区</option>--%>
                            <%--<option value="XiCheng">西城区</option>--%>
                            <%--<option value="ChaoYang">朝阳区</option>--%>
                            <%--<option value="FengTai">丰台区</option>--%>
                        </select>
                    </td>

                </tr>
                <tr>
                    <td >*</td>
                    <td>所在学校</td>
                    <td class="tr"><input id="school" name="school" type="text" onblur="judgeSchool()"></td>
                    <td><span id="school_error" class="hidden">请选择所在学校</span>  <button id="button_school_choose">选择学校</button></td>
                </tr>
                <tr>
                    <td ></td><td></td>
                    <td colspan="2" class="tr"  > <input id="check" name="check" type="checkbox" onclick="judgeAgreement()"><div id="registration_agreement">我已阅读并同意<a>《微课慕课网用户注册协议》</a><span id="check_true" class="hidden">请同意注册协议！</span></div></td>

                </tr>
                <tr>
                    <td ></td><td></td>
                    <td colspan="2"  class="tr"><button type="submit" id="button_register" >立即注册</button></td>
                </tr>

            </table>
        </form>
    </div>
    <img src="static/img/right.jpg" id="img_content_right">


</div>

<div id="footer">
    微课慕课网 版权所有@2014-2015 Tel:010-8345-6666 京ICP备09025234号
</div>

</div>
</body>
</html>
